<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(204, 204, 204);
            }
            .clock {
                width: 300px;
                height: 300px;
                background-color: rgb(15, 15, 15);
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div class="clock">
            <canvas width="300" height="300" id="canvas"></canvas>
        </div>

        <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // 先绘制钟的整体白色底盘
            function drawPanel() {
                ctx.translate(150, 150);
                // 开始绘制
                ctx.beginPath();
                // 画一个圆
                ctx.arc(0, 0, 130, 0, 2 * Math.PI);
                ctx.fillStyle = 'white';
                ctx.fill();
            }

            //   绘制时钟的12位数字
            function hourNum() {
                // 存放12个数字
                var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
                ctx.beginPath();
                // 数字的基本样式
                ctx.font = '30px fangsong';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = 'black';
                for (var i = 0; i < arr.length; i++) {
                    ctx.fillText(arr[i], 108 * Math.cos(((i * 30 - 60) * Math.PI) / 180), 108 * Math.sin(((i * 30 - 60) * Math.PI) / 180));
                }
            }

            //   绘制时钟中心的圆点
            function centerDot() {
                ctx.beginPath();
                ctx.arc(0, 0, 8, 0, 2 * Math.PI);
                ctx.fill();
                ctx.beginPath();
                ctx.fillStyle = 'gray';
                ctx.arc(0, 0, 5, 0, 2 * Math.PI);
                ctx.fill();
            }

            //   绘制时针
            function hourHand(hours, minutes) {
                // 应该旋转的角度，默认时钟为指向12点方向。
                var radius = ((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes;
                // 保存当前状态，为了旋转后能回到当初状态。
                ctx.save();
                ctx.beginPath();
                // 针的宽度
                ctx.lineWidth = 5;
                // 针头为圆角
                ctx.lineCap = 'round';
                ctx.strokeStyle = 'black';
                // 旋转
                ctx.rotate(radius);
                // 画一条线表示时钟
                ctx.moveTo(0, 0);
                ctx.lineTo(0, -50);
                ctx.stroke();
                // 回到保存的状态
                ctx.restore();
            }
            //   绘制分针
            function minuteHand(minutes) {
                2 * Math.PI;
                var radius = ((2 * Math.PI) / 60) * minutes;
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth = 3;
                ctx.lineCap = 'round';
                ctx.strokeStyle = 'black';
                ctx.rotate(radius);
                ctx.moveTo(0, 0);
                ctx.lineTo(0, -70);
                ctx.stroke();
                ctx.restore();
            }
            //   绘制秒针
            function secondHand(seconds) {
                var radius = ((2 * Math.PI) / 60) * seconds;
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.lineCap = 'round';
                ctx.strokeStyle = 'red';
                ctx.rotate(radius);
                ctx.moveTo(0, 0);
                ctx.lineTo(0, -90);
                ctx.stroke();
                ctx.restore();
            }
            //   封装一个函数获取当前时间
            function update() {
                var time = new Date();
                var hours = time.getHours();
                var minutes = time.getMinutes();
                var seconds = time.getSeconds();
                // 保存canvas状态，因为绘制底盘时它偏移了
                ctx.save();
                drawPanel();
                hourNum();
                secondHand(seconds);
                minuteHand(minutes);
                hourHand(hours, minutes);
                centerDot();
                // 恢复canvas状态
                ctx.restore();
            }
            update();
            //   开启定时器，时钟运转
            setInterval(() => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                update();
            }, 1000);
        </script>
    </body>
</html>
